<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="./../plugins/svg.min.js"></script>
  <script src="./../plugins/svg.easing.min.js"></script>
  <script src="./../plugins/svg.shapes.js"></script>
  <script src="./../utils/utils.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">
 <g>
  <rect
    style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
    id="square"
    width="100"
    height="100"
    x="30"
    y="30">
    <animate
      id="frame1"
      attributeName="display"
      values="inline;none;none;none"
      keyTimes="0;0.33;0.66;1"
      dur="1s"
      begin="0s"
      repeatCount="indefinite" />
  </rect>
  <path
    style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
    id="circle"
    d="m 125,80 a 45,45 0 1 1 -90,0 45,45 0 1 1 90,0 z">
    <animate
      id="frame2"
      attributeName="display"
      values="none;inline;none;none"
      keyTimes="0;0.33;0.66;1"
      dur="1s"
      begin="0s"
      repeatCount="indefinite" />
  </path>
  <path
    style="fill:#edd154;fill-opacity:1;stroke:#3c352d;stroke-width:2;stroke-opacity:1;"
    id="triangle"
    d="M 105,105 47,89 89,46 105,105 z">
    <animate
      id="frame3"
      attributeName="display"
      values="none;none;inline;none"
      keyTimes="0;0.33;0.66;1"
      dur="1s"
      begin="0s"
      repeatCount="indefinite" />
  </path>
 </g>
</svg>

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>
</body>
<script>

	var draw = SVG().addTo('body').size(800, 600).move(0, 200);
	var rect = draw.rect(50,50).fill(SVG.Color.random())
	
	// demo1
	//rect.animate().move(200, 200).animate().dmove(50,50).size(100,200) 
	//rect.timeline().finish() // rect at 250,250 with size 300,400

	//demo 2
	//rect.animate({times:true,duration:1000}).move(200, 200)
	//rect.mouseover(function() { this.timeline().pause() })

	//demo 3
	//rect.animate({times:true,duration:1000}).move(200, 200)
	//rect.mouseover(function() { this.timeline().pause() })
	//rect.mouseout(function() { this.timeline().play() })

	//demo 4 
	//rect.animate({times:1,duration:1000}).move(100, 100)
	//rect.timeline().reverse()
	// sets direction to backwards
	//rect.timeline().reverse(true)
	// sets direction to forwards
	//rect.timeline().reverse(false)

	//demo 5
	//rect.animate({times:true,duration:1000}).move(200, 200)
	//rect.timeline().stop()

	//demo 6
	//rect.animate({times:true,duration:3000}).move(200, 200)
	//rect.timeline().speed(5)

	//demo 7
	//rect.animate({times:1,duration:3000}).move(200, 200)
	//rect.timeline().time(2000)

	//demo 8
	//rect.animate({times:1,duration:3000}).move(200, 200)
	//rect.timeline().seek(2000)

	//demo 9
	//rect.animate({times:1,duration:3000}).move(200, 200)
	//rect.timeline().persist(1000) // persist runner for 100ms more than their end time
	//rect.timeline().persist(true) // never delete runners

	//demo 10
	//rect.animate({times:1,duration:3000}).move(200, 200)
	//rect.timeline().source(function(){
	//	console.log("---")
	//})

	//demo 11
	//var timeline = new SVG.Timeline()
	//var runner = new SVG.Runner()
	//runner.move(100, 100)
	//timeline.schedule(runner, 100, 'now') // runner, delay, when - see animate()
	//animate()

	//demo 12
	var timeline = new SVG.Timeline()
	var rect1 = draw.rect(100, 200)
	var rect2 = draw.rect(200, 100) 

	rect1.timeline(timeline)
	rect2.timeline(timeline)

	rect1.animate(300, 0, 'absolute').move(300, 300) // start at time 0 of timeline
	rect2.animate(400, 200, 'absolute').move(500, 500) // start at time 200 of timeline

</script>
</html>